<template>
  <div class="real-container">
    <div class="header">
      <van-nav-bar
        class="title"
        title="创建工单"
        style="width: 100%; height: 44px"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <div class="form-list">
      <van-form>
        <van-cell-group inset>
          <van-cell
            :title="item.name"
            is-link
            v-for="(item, index) in routeList"
            :key="index"
            @click="routeClick(item)"
          />
        </van-cell-group>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter(); //返回
const onClickLeft = () => history.back();

const routeList = ref([
  {
    path: "/rainManagement/seventyTwoMap",
    name: "72小时预报图",
  },
  {
    path: "/task",
    name: "2小时预报图",
  },
  {
    path: "/user",
    name: "实时降雨分布图",
  },
]);

// 跳转
const routeClick = (item) => {
  router.push({
    path: item.path,
  });
};
</script>

<style lang="less" scoped>
.real-container {
  height: 100vh;
  background: rgba(243, 243, 243, 1);
  .header {
    // height: 100px;
    background: #ffffff;
    text-align: center;
    padding-top: 34px;
    .title {
      font-family: PingFang TC, PingFang TC;
      font-weight: 600;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.9);
      // margin-bottom: 20px;
      // border: 1px red solid;
    }
  }

  .form-list {
    // height: calc(100vh - 355px);
    height: 100%;
    // margin: 10px 0;
    overflow-y: auto;
    background: #fff;
    padding-top: 10px;
    margin-top: 10px;
  }
  .detail-foot {
    width: 100vw;
    padding: 20px;
    background: #fff;
    position: fixed;
    bottom: 0px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
  }
}
</style>
